import React, { Component } from 'react'
import { Button, Table } from 'antd'

let columns = [
  {
    title: '用户ID',
    dataIndex: 'id',
  },
  {
    title: '头像',
    dataIndex: 'avatar',
  },
  {
    title: '时间',
    dataIndex: 'createdAt',
  },
  {
    title: '操作',
    dataIndex: 'op',
    render: (text, record) => (
      <span className="rt-table-op">
        <i className="iconfont icon-forbidden"></i> 禁言
        <i className="iconfont icon-details"></i> 详情
        <i className="iconfont icon-delete"></i>
      </span>
    ),
  },
];

let data = [{
  key: '1',
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park',
}, {
  key: '2',
  name: 'Jim Green',
  age: 42,
  address: 'London No. 1 Lake Park',
}, {
  key: '3',
  name: 'Joe Black',
  age: 32,
  address: 'Sidney No. 1 Lake Park',
}];

data = [
  {
    id: Math.random(),
    avatar: 'avatar',
    createdAt: '2016-11-03 13:04:47',
    content: '我爱北京天安门，天安门上放光芒....',
  },
  {
    id: Math.random(),
    avatar: 'avatar',
    createdAt: '2016-11-03 13:04:47',
    content: '我爱北京天安门，天安门上放光芒....',
  },
  {
    id: Math.random(),
    avatar: 'avatar',
    createdAt: '2016-11-03 13:04:47',
    content: '我爱北京天安门，天安门上放光芒....',
  },
  {
    id: Math.random(),
    avatar: 'avatar',
    createdAt: '2016-11-03 13:04:47',
    content: '我爱北京天安门，天安门上放光芒....',
  },
  {
    id: Math.random(),
    avatar: 'avatar',
    createdAt: '2016-11-03 13:04:47',
    content: '我爱北京天安门，天安门上放光芒....',
  },
]

export default class ChatMessage extends Component {
  render() {
    // rowSelection object indicates the need for row selection
    const rowSelection = {
      onChange(selectedRowKeys, selectedRows) {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      },
      onSelect(record, selected, selectedRows) {
        console.log(record, selected, selectedRows);
      },
      onSelectAll(selected, selectedRows, changeRows) {
        console.log(selected, selectedRows, changeRows);
      },
    };
    return (
      <div className="rt-concretion">
        <div className="rt-title-banner">
          <span className="rt-text">消息</span>
          <i className="iconfont icon-close"></i>
        </div>
        <div className="rt-chat-message">
          <div className="rt-operation-bar">
            <div className="rt-filter-op">
              <input placeholder="输入手机号搜索" />
              <input placeholder="输入关键字" />
              <input placeholder="开始日期YY-MM-DD" />
              至
              <input placeholder="结束日期YY-MM-DD" />
              <Button>搜  索</Button>
            </div>
            <div className="rt-placeholder"></div>
            <div className="rt-batch-op">
              <Button>批量屏蔽</Button>
              <Button>批量封号</Button>
            </div>
          </div>

          <Table className='rt-table' rowSelection={rowSelection} columns={columns} dataSource={data} />
        </div>
      </div>
    )
  }
}